<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 100px;
    }
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: skyblue;

      /* 父元素启用3D空间 */
      transform-style: preserve-3d;

      transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(2);
    }
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .top {
      background-color: rgba(255, 0, 0, 0.4);
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      background-color: rgba(0, 255, 200, 0.4);
      transform: rotateX(90deg) translateZ(-50px);
    }
    .front {
      background-color: rgba(212, 0, 255, 0.4);
      transform: translateZ(50px);
    }
    .back {
      background-color: rgba(255, 208, 0, 0.4);
      transform: translateZ(-50px);
    }
    .left {
      background-color: rgba(0, 26, 255, 0.4);
      transform: rotateY(90deg) translateZ(-50px);
    }
    .right {
      background-color: rgba(37, 37, 23, 0.4);
      transform: rotateY(90deg) translateZ(50px);
    }
  </style>
  <body>
    <!-- 父元素（舞台） -->
    <div class="box">
      <!-- 子元素 -->
      <div class="item top">1</div>
      <div class="item bottom">2</div>
      <div class="item front">3</div>
      <div class="item back">4</div>
      <div class="item left">5</div>
      <div class="item right">6</div>
    </div>
  </body>
</html>
